import React from 'react';
import { Button, Row, Col, List, DatePicker } from 'antd';
import { formatMessage } from 'umi';
import { connect } from 'umi';
import moment from 'moment';
import AuthComponent from '@/utils/auth/AuthComponent';
import style from '../Gateway.less';

class DateList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        const { dispatch } = this.props;
        // 假日历 默认日期：', date, week
        const today = new Date();
        const date = moment().format('DD');
        const week = `星期${'日一二三四五六'.charAt(today.getDay())}`;
        dispatch({
            type: 'gateway/chooseNewdate',
            payload: {
                chooseDate: date,
                chooseWeek: week
            }
        });
    }

    /**
     *  日历点击改变事件
     *  切换左边日程表的日期与星期
     * @memberof DateList
     */
    onDateChange = (date, dateString) => {
        const newarr = dateString.split('-');
        const { dispatch } = this.props;
        dispatch({
            type: 'gateway/chooseNewdate',
            payload: {
                chooseDate: newarr[2],
                chooseWeek: newarr[3]
            }
        });
    };

    render() {
        const {
            gateway: { chooseDate, chooseWeek, mockData }
        } = this.props;
        const dateFormat = 'YYYY-MM-DD-dddd';
        return (
            <div className={style.bgfffRC}>
                <Row gutter={20} style={{ marginLeft: '0' }}>
                    <Col
                        className="gutter-row"
                        xs={{ span: 24 }}
                        xl={{ span: 9 }}
                        style={{
                            borderRight: '1px solid #eee',
                            paddingRight: '0',
                            paddingLeft: '0',
                            marginBottom: '0'
                        }}
                    >
                        <div className={style.today}>
                            <span className={style.today_date}>
                                {chooseDate}
                            </span>
                            <span className={style.today_week}>
                                {chooseWeek}
                            </span>
                        </div>
                        <List
                            className={style.wncanlender}
                            itemLayout="horizontal"
                            dataSource={mockData}
                            renderItem={item => (
                                <List.Item key={item.createUser}>
                                    <List.Item.Meta
                                        className={style.workListMeta}
                                        style={{
                                            marginRight: '0'
                                        }}
                                        title={<a href="#">{item.title}</a>}
                                        description={item.modifyTime}
                                    />
                                </List.Item>
                            )}
                        />
                        <div
                            style={{
                                width: 'calc(100% - 60px)',
                                textAlign: 'center',
                                margin: '0 30px'
                            }}
                        >
                            <AuthComponent code="portal:main:schedule">
                                <Button
                                    style={{ maxWidth: '130px', width: '100%' }}
                                >
                                    {formatMessage({
                                        id: 'list.btn.addWork'
                                    })}
                                </Button>
                            </AuthComponent>
                        </div>
                    </Col>
                    <Col
                        className="gutter-row"
                        xs={{ span: 24 }}
                        xl={{ span: 15 }}
                        style={{
                            paddingRight: '0',
                            paddingLeft: '20px',
                            marginBottom: '0'
                        }}
                    >
                        <div id="area" className={style.wnDateDiv}>
                            <DatePicker
                                onChange={this.onDateChange}
                                open
                                format={dateFormat}
                                showToday={false}
                                dropdownClassName={style.wnDatePicker}
                                style={{
                                    visibility: 'hidden'
                                }}
                                popupStyle={{
                                    border: 'none'
                                }}
                                getCalendarContainer={() =>
                                    document.getElementById('area')
                                }
                            />
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}
export default connect(({ gateway }) => ({
    gateway
}))(DateList);
